<template>
    <div class="mine">
        <div class="navBar">
            {{ $t('assemble.个人中心') }}
        </div>

        <div class="userInfo" @click="handleUserInfo">
            <!-- <div class="avatar"></div> -->
            <div class="message">
                <div class="nikeName">
                   {{ userInfo.companyemail }}
                </div>
                <div class="phone">
                    {{ userInfo.phone }}
                </div>
            </div>
            <img class="right_w_img" src="../../static/imgs/right_w.png" alt="" srcset="">
        </div>


        <div class="listBox">

            <div class="listItem" @click="handleAdddress">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.地址') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>
            <div class="listItem" @click="handleUserManual">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.用户手册') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>

            <div class="listItem" @click="handleUpdatepasword">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.修改密码') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>

            <div class="listItem" @click="handleFeedback">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.意见反馈') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>

            <div class="listItem" @click="handleConcatUs">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.联系我们') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>

            <div class="listItem" @click="handleXy(0)">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.隐私政策') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>

            <div class="listItem" @click="handleXy(1)">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.用户协议') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div>
            <div class="heng"></div>

            <!-- <div class="listItem">
                <div class="leftBox">
                    <img class="iconimg" src="../../static/imgs/order.png" alt="" srcset="">
                    <div>
                        {{ $t('assemble.关于我们') }}
                    </div>
                </div>
                <img class="right_b" src="../../static/imgs/right_b.png" alt="" srcset="">
            </div> -->
        </div>

        <div class="height"></div>

        <Tabbar></Tabbar>
    </div>
</template>
<script>
import Tabbar from '@/components/tabbar/index.vue';

export default {
    components: {
        Tabbar

    },
    data() {
        return {
            userInfo: {},
        }
    },
    created() {
       this.userInfo = JSON.parse(localStorage.getItem('userData'))
    },
    mounted() {
    },
    methods: {
        handleUserInfo() {
            this.$router.push({ path: '/pages/mine/userInfo' })
        },

        handleAdddress() {
            this.$router.push({ path: '/pages/mine/addressList' })

        },
        handleUpdatepasword() {
            this.$router.push({ path: '/pages/mine/uptatePassword' })

        },
        handleFeedback() {
            this.$router.push({ path: '/pages/mine/feedBack' })

        },

        handleConcatUs() {
            this.$router.push({ path: '/pages/mine/concatUs' })

        },

        handleUserManual() {
            this.$router.push({ path: '/pages/mine/userManual' })

        },

        handleXy(index) {
            this.$router.push({ path: '/pages/login/yinsi',query:{index} })
        },

    },

}
</script>

<style scoped lang="scss">
@media screen and (max-width: 750px) {
    .navBar {
        width: 100%;
        height: 44px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        line-height: 44px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        text-align: center;
    }

    .userInfo {
        width: 90%;
        height: 100px;
        background: #E00000;
        border-radius: 20px 20px 20px 20px;
        margin: 10px auto;
        display: flex;
        align-items: center;
        padding: 0 30px;
        box-sizing: border-box;
        position: relative;

        .avatar {
            width: 60px;
            height: 60px;
            border-radius: 60px;
            background-color: pink;
        }

        .message {
            margin-left: 20px;

            .nikeName {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 18px;
                color: #FFFFFF;
                line-height: 21px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .phone {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: rgba(255, 255, 255, 0.5);
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-top: 10px;

            }
        }

        .right_w_img {
            position: absolute;
            top: 30px;
            right: 20px;
            width: 24px;
            height: 24px;
        }
    }



    .listBox {
        width: 85%;
        margin: 0 auto;

        .listItem {
            height: 64px;
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 19px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            justify-content: space-between;

            .leftBox {
                display: flex;
                align-items: center;

                .iconimg {
                    width: 18px;
                    height: 20px;
                    margin-right: 10px;
                }
            }

            .right_b {
                width: 24px;
                height: 24px;
            }
        }

        .heng {
            width: 311px;
            height: 1px;
            background: #EDEDED;
            margin: 0 auto;
        }
    }



    .height {
        height: 100px;
    }
}

@media screen and (min-width: 751px) and (max-width: 1300px) {
    .navBar {
        width: 100%;
        height: 88px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 25px;
        line-height: 88px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        text-align: center;
    }

    .userInfo {
        width: 90%;
        height: 200px;
        background: #E00000;
        border-radius: 20px 20px 20px 20px;
        margin: 10px auto;
        display: flex;
        align-items: center;
        padding: 0 30px;
        box-sizing: border-box;
        position: relative;

        .avatar {
            width: 120px;
            height: 120px;
            border-radius: 60px;
            background-color: pink;
        }

        .message {
            margin-left: 40px;

            .nikeName {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 26px;
                color: #FFFFFF;
                line-height: 21px;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }

            .phone {
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 18px;
                color: rgba(255, 255, 255, 0.5);
                line-height: 16px;
                text-align: left;
                font-style: normal;
                text-transform: none;
                margin-top: 30px;
            }
        }

        .right_w_img {
            position: absolute;
            top: 60px;
            right: 40px;
            width: 50px;
            height: 50px;
        }
    }


    .listBox {
        width: 85%;
        margin: 0 auto;

        .listItem {
            height: 120px;
            display: flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24px;
            color: #333333;
            line-height: 30px;
            text-align: left;
            font-style: normal;
            text-transform: none;
            justify-content: space-between;

            .leftBox {
                display: flex;
                align-items: center;

                .iconimg {
                    width: 36px;
                    height: 40px;
                    margin-right: 20px;
                }
            }

            .right_b {
                width: 48px;
                height: 48px;
            }
        }

        .heng {
            width: 85%;
            height: 1px;
            background: #EDEDED;
            margin: 0 auto;
        }
    }


    .height {
        height: 200px;
    }

}
</style>